<template>
    <admin-container class="dep">
        <el-row>
            <el-col :span="8">
                <div class="dep-btn">
                    <el-button icon="el-icon-plus" @click="onClickAdd">添加组织</el-button>
                </div>

                <div class="dep-list">
                    <el-tree :data="data"
                             ref="tree"
                             v-loading="loading"
                             node-key="id"
                             :props="props"
                             :expand-on-click-node="false"
                             highlight-current
                             default-expand-all
                             @current-change="onCurrentChange"
                    >
                        <div class="tree-node" slot-scope="{ node, data }">
                            <div class="tree-node-item tree-node-label">{{ node.label }}</div>
                            <div class="tree-node-item tree-node-action">
                              <el-button
                                  type="text"
                                  size="mini"
                                  @click.stop="() => onClickRemove(data, node)">
                                  删除
                              </el-button>
                            </div>
                        </div>
                    </el-tree>
                </div>
            </el-col>

            <el-col :span="16">
                <div class="dep-form">
                    <h3 v-if="action" class="dep-title">
                        {{ action === 1 ? '添加组织' : '编辑组织' }}
                    </h3>

                    <el-form label-width="100px" v-show="action" @submit.prevent.native="onSubmit">
                        <el-form-item label="ID" v-show="form.id">
                            {{ form.id }}
                        </el-form-item>

                        <el-form-item label="名称">
                            <el-input v-model="form.name"/>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" native-type="submit" :loading="subing">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import { deleteDepartment, getDepartments, postDepartment } from '@/services/auth/department.service';
import { AdminDepartmentModel } from '@/models/admin-department.model';
import { ElTree } from 'element-ui/types/tree';

@Component({
    components: {
        AdminContainer
    }
})
export default class Page extends Vue {
    private data: AdminDepartmentModel[] = [];
    private loading: boolean = true;
    private action: number = 0;
    private selected: AdminDepartmentModel | undefined;
    private form = {} as AdminDepartmentModel;
    private props = {
        label: 'name'
    };
    private subing: boolean = false;

    mounted() {
        this.getList();
    }

    // 获取组织列表
    getList() {
        this.loading = true;
        getDepartments()
            .finally(() => {
                this.loading = false;
            })
            .then(result => {
                this.data = [
                    {
                        id: 0,
                        name: '根',
                        parent_id: 0,
                        children: this.$array.tree(result.data.items, 'id', 'parent_id')
                    }
                ];
                this.$nextTick(() => {
                    this.tree && this.tree.setCurrentKey(0);
                })
            })
    }

    // 添加组织
    onClickAdd() {
        this.action = 1;
        let pid: number = 0;
        if (this.selected) {
            pid = this.selected.id;
        }
        this.form = {
            parent_id: pid,
        } as any;
    }

    // 节点选中
    onCurrentChange(data: any, node: any) {
        this.selected = { ...data };
        if (data.id === 0) {
            this.action = 0;
            return;
        }
        this.form = { ...data };
        this.action = 2;
    }

    // 当前树实例
    get tree(): ElTree<any, any> {
        return this.$refs.tree as any;
    }

    // 删除组织
    async onClickRemove(data: any, node: any) {
        if (node.childNodes && node.childNodes.length > 0) {
            this.$message.error('请先删除子组织');
            return;
        }
        await this.$confirm('确定要删除此组织吗?');
        const result = await deleteDepartment(data.id);
        this.tree.remove(node);
        this.$message.success('删除成功');
        this.action = 0;
    }

    // 提交
    onSubmit() {
        if (!this.form.name) {
            this.$message.error('组织名称为空');
            return;
        }
        let node = this.tree.getNode(this.selected?.id ?? 0);
        this.subing = true;
        let act: string = this.action === 1 ? 'add' : 'edit';
        postDepartment(act, this.form)
            .finally(() => {
                this.subing = false;
            })
            .then(result => {
                if (this.action === 1) {
                    // 插入
                    this.tree.append(result.data, node);
                    this.$message.success('添加成功');
                } else {
                    // 修改
                    node.data = { ...node.data, ...result.data };
                    this.$message.success('编辑成功');
                }
            })
    }
}
</script>

<style scoped lang="scss">
.dep {
    /deep/ .el-tree-node__content {
        height: auto;
    }
    .tree-node {
        padding: 6px 12px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-item {
            font-size: 14px;
        }
    }
    &-list {
        margin-top: 12px;
        border: solid 1px #efefef;
    }
    &-form {
        padding: 0 12px;
    }
    &-title {
        background: #f3f3f3;
        font-weight: 400;
        padding: 10px;
        font-size: 14px;
        margin-bottom: 20px;
    }
}
</style>
